<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.event.drag-1.2.js"></script>
    <script src="http://threedubmedia.googlecode.com/files/jquery.event.drop-1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function (){
        $('.post-it').bind('drag', function( event ) {
          //alert('ok');  
          $( this ).css({
            top: event.offsetY,
            left: event.offsetX
          });
        });
        $('.regions').bind('drop', function(event) {
          alert($(this).attr('id'));
        });
      });
    </script>
    <style type="text/css">
      .post-it {
        height: 100px;
        width: 100px;
        background-color: yellow;
        position: absolute;
      }

      #region-1 {
        background-color: blue;
        position: absolute;
        width: 200px;
        height: 200px;
        top: 100px;
        left: 250px;
      }
      
      #region-2 {
        background-color: red;
        position: absolute;
        width: 200px;
        height: 200px;
        top: 400px;
        left: 250px;
      }
    </style>
    <title>JQuery Test</title>
  </head>
  
  <body>
    <div id="region-1" class="regions">
      <span>REGION 1</span>
    </div>
    <div id="region-2" class="regions">
      <span>REGION 2</span>
    </div>
    <div id="post-it-1" class="post-it">
      <span>Task 1</span>
    </div>
  </body>
</html>